const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const webpackbar=require("webpackbar");
//抽离css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    entry:"./src/index.js",
    output:{
        filename:"main.js",
        path:path.join(__dirname,"./dist")
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'}),
        new webpackbar(),
        ////////热替换
        new webpack.HotModuleReplacementPlugin({
            // Options...
          }),
        new MiniCssExtractPlugin({
            filename:"style.scss"
        }),
        new VueLoaderPlugin()
    ],
    "mode":"development",
    module: {
        rules: [
//////////babel-loader
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
//////////css-loader
          {
            test: /\.(css|scss|sass|less)$/,
            use: [{
                loader: MiniCssExtractPlugin.loader // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
            }, {
                loader: "sass-loader" // 将 Sass 编译成 CSS
            }]
          },
          {
            test: /\.(png|jpg|gif|eof|svg|ttf|woff|woff2)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      devServer:{
        host:"localhost",
        port:9090,
        open:true,
        hot:true
      }
}